<template>
    <div>
        <el-form :model="form" ref="form" :rules="rules" class="login-container">
            <h3 v-if="currentModule == 'login'" class="login_title" label="用户名：">用户登陆</h3>
            <h3 v-if="currentModule == 'signup'" class="login_title" label="用户名：">用户注册</h3>

            <el-form-item prop="username" label="用户名：">
                <el-input v-model="form.username" placeholder="请输入用户名" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input v-model="form.password" @keyup.enter.native="handleLogin" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-if="currentModule == 'login'" class="login_submit" type="primary" style="width:30%;" :loading="loading" @click="handleLogin">
                    登录
                </el-button>
                <el-button v-if="currentModule == 'signup'" class="login_submit" type="primary" style="width:30%;" :loading="loading" @click="handleSignup">
                    注册
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button v-if="currentModule == 'login'" class="login_submit" type="text" @click="currentModule = 'signup'">注册</el-button>
                <el-button v-if="currentModule == 'signup'" class="login_submit" type="text" @click="currentModule = 'login'">登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import common from "../../utils/common.vue";

export default {
    name: 'login', 
    data() {
        return {
            form: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],   
            },
            loading: false,
            currentModule: 'login'
        }
    },
    watch: {
        currentModule: function () {
            this.clearForm();
        }
    },
    computed: {
    },
    methods: {
        handleLogin(){
            this.$store.dispatch('Login', this.form).then(data => {
                this.loading = false;
                if (data.code == common.codeFromBackEnd.SUCCESS_CODE) {
                    this.$router.push('/');
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'error'
                    })                
                }
            })
        },
        handleSignup(){
            this.api({
                url:"/user/signup",
                method: "post",
                data: this.form
            }).then(data => {
                if (data.code == common.codeFromBackEnd.SUCCESS_CODE){
                    this.$message({
                        message: '注册成功！',
                        type: 'success'
                    });
                    this.currentModule = 'login';
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'error'
                    })
                }
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("注册失败")
            })
        },
        clearForm(){
            this.form.username = '';
            this.form.password = '';
        }
    }
}
</script>

<style scoped>
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 100px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background-color: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }

    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    .login_submit {
        margin-left: 50%;
        margin-right: 50%;
        text-align: center;
        transform: translate(-50%, 0%);
    }
</style>
